如何答一道惊艳面试官的数组去重问题？

（给前端大全加星标，提升前端技能）

作者：程序员成长指北 公号 / koalaCoding （本文来自作者投稿）

为什么写这篇文章？

1. 数组去重应该是面试必考问题之一。
2. 虽然它是一道并不复杂的问题，但是也能看出面试者的广度和深度，还有考虑问题的全面性。
3. 实际开发中我们应该选择哪种方式数组去重，本文告诉你。
4. 你以为的不一定你以为，面试官不只是让你去重一个数组，他想知道的有点多，包括你的思想。

当面试官问到时怎么回答？

首先:我知道多少种去重方式

双层 for 循环

function distinct(arr) {
    for (let i=0, len=arr.length; i<len; i++) {
        for (let j=i+1; j<len; j++) {
            if (arr[i] == arr[j]) {
                arr.splice(j, 1);
                // splice 会改变数组长度，所以要将数组长度 len 和下标 j 减一
                len--;
                j--;
            }
        }
    }
    return arr;
}

思想: 双重 for 循环是比较笨拙的方法，它实现的原理很简单：先定义一个包含原始数组第一个元素的数组，然后遍历原始数组，将原始数组中的每个元素与新数组中的每个元素进行比对，如果不重复则添加到新数组中，最后返回新数组；因为它的时间复杂度是O(n^2)，如果数组长度很大，效率会很低。

Array.filter() 加 indexOf

function distinct(a, b) {
    let arr = a.concat(b);
    return arr.filter((item, index)=> {
        return arr.indexOf(item) === index
    })
}

思想: 利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等，如果不等则说明该元素是重复元素

Array.sort() 加一行遍历冒泡(相邻元素去重)

function distinct(array) {
    var res = [];
    var sortedArray = array.concat().sort();
    var seen;
    for (var i = 0, len = sortedArray.length; i < len; i++) {
        // 如果是第一个元素或者相邻的元素不相同
        if (!i || seen !== sortedArray[i]) {
            res.push(sortedArray[i])
        }
        seen = sortedArray[i];
    }
    return res;
}

思想: 调用了数组的排序方法 sort()，V8引擎 的 sort() 方法在数组长度小于等于10的情况下，会使用插入排序，大于10的情况下会使用快速排序(sort函数在我之前高阶函数那篇文章有详细讲解【JS必知必会】高阶函数详解与实战)。然后根据排序后的结果进行遍历及相邻元素比对(其实就是一行冒泡排序比较)，如果相等则跳过该元素，直到遍历结束。

ES6 中的 Set 去重

function distinct(array) {
   return Array.from(new Set(array));
}

甚至可以再简化下：

function unique(array) {
    return [...new Set(array)];
}

还可以再简化下：

let unique = (a) => [...new Set(a)]

思想: ES6 提供了新的数据结构 Set，Set 结构的一个特性就是成员值都是唯一的，没有重复的值。(同时请大家注意这个简化过程)

Object 键值对

function distinct(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}

这种方法是利用一个空的 Object 对象，我们把数组的值存成 Object 的 key 值，比如 Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的,但是最后请注意这里obj[typeof item + item] = true没有直接使用obj[item],是因为 123 和 '123' 是不同的，直接使用前面的方法会判断为同一个值，因为对象的键值只能是字符串，所以我们可以使用 typeof item + item 拼成字符串作为 key 值来避免这个问题。

然后:询问面试官具体场景

(如果你考虑的这些和你问的，面试官不以为然，可能自己都没想，随便让你数组去重，可能这个面试官也...)

性能考虑(是想要最快的速度查到数据吗？)

为了测试这些解法的性能，我写了一个测试模版，用来计算数组去重的耗时。模版代码如下:

// distinct.js

let arr1 = Array.from(new Array(100000), (x, index)=>{
    return index
})

let arr2 = Array.from(new Array(50000), (x, index)=>{
    return index+index
})

let start = new Date().getTime()
console.log('开始数组去重')

let arr = a.concat(b);

function distinct(arr) {
    // 数组去重
}

console.log('去重后的长度', distinct(arr).length)

let end = new Date().getTime()
console.log('耗时', end - start)

上面的多种数组去后，计算耗费时间

双重 for 循环 >  Array.filter()加 indexOf  > Array.sort() 加一行遍历冒泡 > ES6中的Set去重 > Object 键值对去重复

★

注意:这里只是本人测试的结果，具体情况可能与场景不同，比如排序过的数组直接去重，直接使用冒泡相邻比较性能可能更好。大家也可以自己尝试一下，有问题欢迎一起讨论指出。

”

兼容性与场景考虑(数组中是否包含对象，NaN等？)

我们要考虑这个数组中是否有null、undefined、NaN、对象如果二者都出现，上面的所有数组去重方法并不是都是适用哦，下面详细说一下。

先说一下 == 和 === 区别

=== 严格相等，会比较两个值的类型和值==  抽象相等，比较时，会先进行类型转换，然后再比较值想更详细了解转换过程的可以看这篇文章js 中 == 和 === 的区别

说一下我说的几个类型的相等问题

let str1 = '123';
let str2 = new String('123');

console.log(str1 == str2); // true
console.log(str1 === str2); // false

console.log(null == null); // true
console.log(null === null); // true

console.log(undefined == undefined); // true
console.log(undefined === undefined); // true

console.log(NaN == NaN); // false
console.log(NaN === NaN); // false

console.log(/a/ == /a/); // false
console.log(/a/ === /a/); // false

console.log({} == {}); // false
console.log({} === {}); // false

几种去重函数针对带有特殊类型的对比

indexOf 与 Set 的一点说明：

上面代码中console.log(NaN === NaN); // false, indexOf 底层使用的是 === 进行判断，所以使用 indexOf 查找不到 NaN 元素

// demo1
var arr = [1, 2, NaN];
arr.indexOf(NaN); // -1

Set可以去重NaN类型， Set内部认为尽管 NaN === NaN 为 false，但是这两个元素是重复的。

// demo2
function distinct(array) {
   return Array.from(new Set(array));
}
console.log(unique([NaN, NaN])) // [NaN]

具体去重比较

将这样一个数组按照上面的方法去重后的比较：

var array = [1, 1, '1', '1', null, null, undefined, undefined, new String('1'), new String('1'), /a/, /a/, NaN, NaN];

方法	结果	说明
双层 for 循环	[1, "1", null, undefined, String, String, /a/, /a/, NaN, NaN]	对象和 NaN 不去重
Array.sort()加一行遍历冒泡	[/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined]	对象和 NaN 不去重 数字 1 也不去重
Array.filter()加 indexOf	[1, "1", null, undefined, String, String, /a/, /a/]	对象不去重 NaN 会被忽略掉
Object 键值对去重	[1, "1", null, undefined, String, /a/, NaN]	全部去重
ES6中的Set去重	[1, "1", null, undefined, String, String, /a/, /a/, NaN]	对象不去重 NaN 去重

内存考虑(去重复过程中，是想要空间复杂度最低吗？)

虽然说对于 V8 引擎，内存考虑已经显得不那么重要了，而且真的数据量很大的时候，一般去重在后台处理了。尽管如此，我们也不能放过任何一个可以证明自己优秀的，还是考虑一下，嘿嘿。

以上的所有数组去重方式，应该 Object 对象去重复的方式是时间复杂度是最低的，除了一次遍历时间复杂度为O(n) 后，查找到重复数据的时间复杂度是O(1)，类似散列表，大家也可以使用 ES6 中的 Map 尝试实现一下。

但是对象去重复的空间复杂度是最高的，因为开辟了一个对象，其他的几种方式都没有开辟新的空间，从外表看来，更深入的源码有待探究，这里只是要说明大家在回答的时候也可以考虑到时间复杂度还有空间复杂度。

另外补充一个误区，有的小伙伴会认为 Array.filter()加 indexOf 这种方式时间复杂度为 O(n) ,其实不是这样，我觉得也是O(n^2)。因为 indexOf 函数，源码其实它也是进行 for 循环遍历的。具体实现如下

String.prototype.indexOf = function(s) {
    for (var i = 0; i < this.length - s.length; i++) {
        if (this.charAt(i) === s.charAt(0) &&
            this.substring(i, s.length) === s) {
            return i;
        }
    }
    return -1;
};

补充说明第三方库lodash

lodash 如何实现去重

简单说下 lodash 的 uniq 方法的源码实现。

这个方法的行为和使用 Set 进行去重的结果一致。

当数组长度大于等于 200 时，会创建 Set并将 Set 转换为数组来进行去重（Set 不存在情况的实现不做分析）。当数组长度小于 200 时，会使用类似前面提到的 双重循环 的去重方案，另外还会做 NaN 的去重。

总结

面试时回答面试官的问题，除了你能把代码编出来运行出正确的结果，正确还包含对问题的独到见解,还需要考虑下面的问题：

• 优化
• 代码规范
• 容错性其实如果是非常难的问题，对你的竞争对手来说，也是难的，关键在于你所表达出的解决问题的思路，甚至通过表达解题思路的方向，以及你考虑问题的全面性，其实不仅仅这一道简单面试题，算法题是如此。

参考文章

1. MDN中一些函数讲解

2. 深入分析数组去重

3. JavaScript专题之数组去重

4. 排序算法学习总结

推荐阅读

（点击标题可跳转阅读）

觉得本文对你有帮助？请分享给更多人

关注「前端大全」加星标，提升前端技能

好文章，我在看❤️